<template>
    <div>
      <div class="tree-ctrl-body">
        <div class="tree-table-ctrl">
          <div class="Btns-ctrl-body margin-bottom-btns" >
            <div class="btns f-r">
              <button type="button" class="btn btn-info btn-right-new" @click="btnAddSubnode">新增根类型</button>
            </div>
          </div>
          <div id="tree-dep" class="ztree div-tree ztree-hidden">
          </div>
        </div>
        <!-- {{TreeNodes}} -->
        <div class="tree-table-ctrl ">
          <div class="table-ctrl-body">
            <!--按钮组-->
            <div class="Btns-ctrl-body">
              <div class="btns f-r">
                <button type="button" class="btn btn-info" @click="toggleAddModel">新增</button>
                <button type="button" class="btn btn-warning" @click="toggleUpdateDict">修改</button>
                <button type="button" class="btn btn-danger" @click="deleteDictFn">删除</button>
              </div>
            </div>
            <!--按钮组闭合-->
            <!--表格组-->
            <div class="table-ctrl table-no-paging">
              <!--表格头-->
              <!--{{treeTableRow}}-->
              <div class="table-header">
                <table class="table-default">
                  <thead>
                  <tr >
                    <th
                      class="longtext"
                      v-for="(ths,index) in tableHeader"
                      :class="'table-td'+index"
                    >
                      {{ths.value}}
                    </th>
                  </tr>
                  </thead>
                </table>
              </div>
              <!--表格中部-->
              <div class="table-overflowX ">
                <table class="table-default">
                  <tbody>
                  <tr
                    v-for="(trs,index) in tableRow"
                    @click="userSelect(trs,index)"
                    :class="{active: isActive===index}"
                  >
                    <td
                      class="longtext"
                      v-for="(tds,index1) in tableHeader"
                      :class="'table-td'+index1"
                      :title="trs[tds.key]"
                    >
                      {{ trs[tds.key] }}
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
    <!-- 字典 -->
      <AddDictionaryModel
        :addModelObj = "addModelObj"
        @addModelClose = "toggleAddModel"
      ></AddDictionaryModel>
      <UpdateDictionaryModel
        :UpdateDictModelObj = "UpdateDictModelObj"
        @UpdateDictClose = "toggleUpdateDict"
      ></UpdateDictionaryModel>
    <!-- 字典 end-->
    <!-- 字典项 -->
      <AddTagModel
        :addTagModelObj = "addTagModelObj"
        @addTagModelClose = "toggleAddTagModel"
      ></AddTagModel>
      <UpdateTagModel
        :UpdateTagModelObj = "UpdateTagModelObj"
        @UpdateTagModelClose = "toggleUpdateTagModel"
      ></UpdateTagModel>
    <!-- 字典项 end-->
    </div>
</template>

<script>
  import AddDictionaryModel from "./AddDictionaryModel"
  import UpdateDictionaryModel from "./UpdateDictionaryModel"
  import AddTagModel from "./AddTagModel"
  import UpdateTagModel from "./UpdateTagModel"

  export default {
    name: "dictionary",
    data(){
      return {
        isActive: -1,
        selectRowId: "",
        // 树初始化的配置
        setting : {
          edit: {
            enable: true,
            removeTitle: '删除',
            renameTitle: '修改',
            showRemoveBtn: this.setRemoveBtn
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'parentId'
            },
          },
          view: {
            // showIcon: false
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
            selectedMulti: false
          },
          callback: {
            onClick: this.zTreeOnClick,
            beforeRemove: this.beforeRemove,
            beforeEditName: this.zTreeBeforeEditName,
            beforeDrag: this.beforeDrag
          }
        },
        tableRow: [],  // 表格数据
        tableHeader: [
          {"key":"code","value":"key"},
          {"key":"name","value":"字典名称"},
          {"key":"description","value":"描述"},
        ], // 表格头部
        // 字典项弹窗
        addModelObj: {
          isShow: false,
          id: ''
        },
        UpdateDictModelObj: {
          isShow: false,
          id: '',
          name: '',
          descriptionL: '',
          code: '',
          valid: 1,
          treeNodeId: ''    // 在用户点击树形结构的时候改变此值
        },
        addTagModelObj: {
          isShow: false,
          parentId: ''
        },
        UpdateTagModelObj: {
          isShow: false,
          id: '',
        },
      }
    },
    components: {
      AddDictionaryModel,
      UpdateDictionaryModel,
      AddTagModel,
      UpdateTagModel,
    },
    mounted () {
      this.init();
    },
    methods: {
      init () {
        //初始化加载树结构
        let params = {};
        this.treeAjax(this.Dictionary + '/tag/init','get',params);
      },
      //树结构加载
      treeAjax(url,type,params){
        this.$axios[type](url)
          .then((data)=>{
            $.fn.zTree.init($("#tree-dep"), this.setting, data.data);
            $(function(){
              $("#tree-dep > li").eq(0).children("a").click();
            });
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //  操作树的新增
      addHoverDom(treeId, treeNode) {
        let self = this;
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
          + "' title='新增下级节点' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
          self.btnAddSubnode(treeNode);
          return false;
        });
      },
      // 新增图标消失 当鼠标移出节点时，隐藏用户自定义控件
      removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
      },
      // 树节点单击操作
      zTreeOnClick (evt, treeId, treeNode) {
        //console.log(treeNode);
        // 用来初始化表格
        this.addModelObj.id = treeNode.id;
        // 用来字典项code在字典标签中唯一
        this.UpdateDictModelObj.treeNodeId = treeNode.id;
        // 用来字典标签新增
        this.addTagModelObj.parentId = treeNode.id;
        this.initTable();
      },
      // 右侧表单初始化
      initTable () {
        this.isActive = "";
        this.selectRowId = "";
        this.UpdateDictModelObj.id = "";
        this.$axios({
          url: this.Dictionary + "/tag/tree/detail/id/"
            + this.addModelObj.id
            + "?depth=1",
          method: 'get'
        })
          .then( res => {
            let data = res.data.tag.objs;
            this.tableRow = data;
            if(data.length > 300){
              this.s_alert("数据长度超过300条！");
              // alert('数据长度超过300条');
            }
          })
          .catch( err => {
            this.s_alert("请求接口错误！");
            //console.log(err);
          })
      },
      //  操作树的删除
      beforeRemove(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree-dep");
        zTree.selectNode(treeNode);
        let nodeAry = zTree.transformToArray(treeNode);
        if(nodeAry.length > 1){
          this.s_alert("删除节点下面有子节点，不能删除！");
          // alert('删除节点下面有子节点，不能删除！');
          return false;
        }
        let msg = confirm("确认删除字典类型 -- " + treeNode.name + " 吗？");
        if (msg) {
          this.btnDelete(treeNode.id);
        }else {
          return false;
        }
      },
      //  关闭树编辑拖动功能
      beforeDrag (treeId, treeNodes) {
        return false;
      },
      // 树节点新增弹窗初始化操作
      btnAddSubnode (treeNode) {
        if(treeNode){
          this.addTagModelObj.parentId = treeNode.id;
        } else {
          this.addTagModelObj.parentId = null;
        }
        this.toggleAddTagModel();
      },
      // 设置父节点不显示删除按钮
      setRemoveBtn (treeId, treeNode) {
        return !treeNode.isParent;
      },
      //选择
      userSelect(obj,index){
        this.isActive = index;
        this.selectRowId = obj.id;
        this.UpdateDictModelObj.id = obj.id;
        this.UpdateDictModelObj.name = obj.name;
        this.UpdateDictModelObj.description = obj.description;
        this.UpdateDictModelObj.code = obj.code;
        this.UpdateDictModelObj.valid = obj.valid;
        //console.log(obj);
        //console.log(this.selectRowId);
      },
      //新增弹窗显示与隐藏
      toggleAddModel(){
        this.addModelObj.isShow = !this.addModelObj.isShow;
        //console.log(this.addModelObj.isShow);
        if( this.addModelObj.isShow === false ){
          //重新加载表格
          this.initTable();
        }
      },
      // 修改字典项显示与隐藏
      toggleUpdateDict () {
        if(this.UpdateDictModelObj.id != ''){
          this.UpdateDictModelObj.isShow = !this.UpdateDictModelObj.isShow;
        } else {
          this.s_alert("请选择需要修改的字典！");
          // alert("请选择需要修改的字典！");
        }
        if( this.UpdateDictModelObj.isShow === false ){
          //重新加载表格
          this.initTable();
          // clear
          this.isActive = -1;
          this.UpdateDictModelObj.id = '';
          this.UpdateDictModelObj.name = '';
          this.UpdateDictModelObj.description = '';
          this.UpdateDictModelObj.code = '';
          this.UpdateDictModelObj.valid = 1;
        }
      },
      // 删除字典项
      deleteDictFn () {
        if(this.selectRowId != ''){
          let msg = confirm("请问是否删除该字典？");
          if(msg){
            this.$axios.delete(this.Dictionary + '/dict/id/'+this.selectRowId)
              .then( res => {
                //console.log(res);
                this.s_alert("删除成功！");
                this.s_logwrite("基础信息管理-字典管理","删除字典项");
                // alert("删除成功！");
                this.initTable();
              })
              .catch(res => {
                this.s_alert("删除失败！");
                // alert("删除失败！");
                //console.log(res);
              })
          }
        } else {
          this.s_alert("请先选择需要删除的项！");
        }
      },
      //新增弹窗显示与隐藏
      toggleAddTagModel () {
        this.addTagModelObj.isShow = !this.addTagModelObj.isShow;
        //console.log(this.addTagModelObj.isShow);
        if( this.addTagModelObj.isShow === false ){
          //重新加载树形结构
          this.init();
        }
      },
      // 操作树的更改
      zTreeBeforeEditName (treeId, treeNode) {
        // 用来字典标签修改
        this.UpdateTagModelObj.id = treeNode.id;
        this.toggleUpdateTagModel();
        return false;
      },
      // 修改字典标签弹窗
      toggleUpdateTagModel (){
        this.UpdateTagModelObj.isShow = !this.UpdateTagModelObj.isShow;
        //console.log(this.UpdateTagModelObj.isShow);
        if( this.UpdateTagModelObj.isShow === false ){
          //重新加载树形结构
          this.init();
        }
      },
      // 删除字典标签
      btnDelete (id) {
        this.$axios.delete(this.Dictionary + '/tag/id/' + id)
          .then( res => {
            //console.log(res);
            this.s_alert("删除成功!");
            this.s_logwrite("基础信息管理-字典管理","删除字典标签");
            // alert("删除成功！");
            this.init();
          })
          .catch(res => {
            this.s_alert("删除失败!");
            // alert("删除失败！");
            //console.log(res);
          })
      },
    }, //end methods
  }
</script>

<style scoped>

  .tree-ctrl-body .tree-table-ctrl:nth-of-type(1) {
    width: 20%;
    height: 100%;
    box-sizing: border-box;
    padding-right: 5px;
  }

  .tree-ctrl-body .tree-table-ctrl:nth-of-type(2) {
    width: 80%;
  }
.table-no-paging {
  padding-bottom: 0;
}
  .table-td0,.table-td1 {
    width: 15%;
  }
/*  .tree-ctrl-body .tree-table-ctrl:nth-of-type(1){
    min-width: 176px;
  }*/
/*@media screen and (max-width: 1400px) {
  .tree-ctrl-body .tree-table-ctrl:nth-of-type(2){
    width: calc(100% - 180px);
  }
}*/
.margin-bottom-btns {
  position: relative;
  margin-bottom: 5px;
}
.margin-bottom-btns:after {
  content: '';
  border-right: 4px solid #ccc;
  display: inline-block;
  height: calc(100% + 5px);
  position: absolute;
  right: -5px;
}
.Btns-ctrl-body .btns .btn:last-child {
  margin-right: 2px;
}

</style>



